<template>
    <div class="invitation">
        <div class="header">
            <img class="avatar" :src="fromUserInfo.avatar">
            <div class="invitation-info">
                <div class="info">
                    <span>我是{{fromUserInfo.name}}，正在使用移动物流管家神行镖，给我助力很大，特推荐使用共同致富</span>
                </div>
            </div>
        </div>
        <div class="body">
            <div class="form-area">
                <div class="form-title">输入手机号领积分</div>
                <div class="form-main">
                    <div class="radio form-item">
                        <AppRadio label="我是司机" value="1" v-model="userType"></AppRadio>
                        <AppRadio label="我是货主" value="2" v-model="userType"></AppRadio>
                    </div>
                    <div class="tel form-item">
                        <AppInput type="tel" placeholder="请输入手机号领福利" v-model="tel"></AppInput>
                    </div>
                    <div class="validation form-item">
                        <AppInput class="code-input" type="number" placeholder="验证码" v-model="code"></AppInput>
                        <AppButton @click="getMessageCode" :disable="inTiming">验证码<span v-if="inTiming">({{timeleft}}s)</span></AppButton>
                    </div>
                </div>
            </div>
            <div class="footer">
                <AppButton :block="true" bg="#EB503C" @click="submit">立即领取</AppButton>
            </div>
        </div>
    </div>
</template>

<script>
    import AppInput from "../components/AppInput";
    import AppButton from "../components/AppButton";
    import AppRadio from "../components/AppRadio";
    import{ getUrlParam } from "../util";
    import httpService from '../helper/httpService';

    export default {
        name: "Invitation",
        components: {AppRadio, AppButton, AppInput},
        data() {
            return {
                fromUserInfo: {},
                userType: '1',
                tel: '',
                code: '',
                timeleft: 60,
                inTiming: false
            };
        },
        methods: {
            getMessageCode() {
                if (this.tel && this.tel.trim()) {
                    httpService.post('/user/sendShortmessageCode', {
                        useraccount: this.tel.trim(),
                        userType: this.userType,
                        action: 7
                    }).then(res => {
                        this.inTiming = true;
                        clearInterval(this.timer);
                        this.timer = setInterval(() => {
                            if (this.timeleft > 0) {
                                this.timeleft = this.timeleft - 1;
                            } else {
                                clearInterval(this.timer);
                                this.inTiming = false;
                                this.timeleft = 60;
                            }
                        }, 1000);
                    }, err => {
                        this.$toast({
                            message: err.msg,
                            position: 'bottom'
                        });
                    })
                } else {
                    this.$toast({
                        message: '请输入正确的手机号',
                        position: 'bottom'
                    });
                }
            },
            submit() {
                if (!this.tel || !this.tel.trim()) {
                    this.$toast({
                        message: '请输入正确的手机号',
                        position: 'bottom'
                    });
                    return;
                }
                if (!this.code) {
                    this.$toast({
                        message: '请输入验证码',
                        position: 'bottom'
                    });
                    return;
                }
                httpService.post('/user/friend/recommendFriend', {
                    acceptUserType: this.userType,
                    idcardseqno: this.userId,
                    identifyingcode: this.code,
                    telephone: this.tel,
                    userType: this.fromUserType
                }).then(res => {
                    this.$router.push({
                        name: 'Download'
                    });
                }, (error) => {
                    this.$toast({
                        message: error.msg,
                        position: 'bottom'
                    });
                });
            }
        },
        mounted() {
            var query = getUrlParam();
            this.userId = query.idcardseqno;
            this.fromUserType = query.userType;
            httpService.get('/user/getUserSimpleInfo', {
                idcardseqno: this.userId,
                userType: this.fromUserType
            }).then(res => {
                this.fromUserInfo = {
                    name: res.name,
                    avatar: res.image
                };
            });
        },
        beforeDestroy() {
            clearInterval(this.timer);
        }
    }
</script>

<style lang="scss" scoped>
    .invitation {
        background-image: url('../assets/image/readpack-bg.png');
        background-size: 100% 100%;
        height: 100vh;
        overflow: auto;
        font-size: 16/3.75+vw;
        padding: 30/3.75+vw 20/3.75+vw 0;
        .header {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            .avatar {
                width: 40/3.75+vw;
                height: 40/3.75+vw;
                border-radius: 40/3.75+vw;
            }
            .invitation-info {
                margin-left: 20/3.75+vw;
                height: 36/3.75+vw;
                flex: 1;
                .info {
                    display: inline-flex;
                    height: 100%;
                    background: #FFEBD3;
                    color: #996243;
                    padding: 0 20/3.75+vw;
                    border-radius: 40/3.75+vw;
                    font-size: 12/3.75+vw;
                    align-items: center;
                    justify-content: flex-start;
                }
            }
        }
        .body {
            margin-top: 20/3.75+vw;
            padding: 0 6vw;
            .form-area {
                width: 100%;
                height: 100vw;
                position: relative;
                font-size: 16/3.75+vw;
                background: url('../assets/image/redpack.png');
                background-size: 100% 100%;
                padding: 30/3.75+vw;
                .form-title {
                    margin-top: 10/3.75+vw;
                    color: #fff;
                    text-align: center;
                    font-size: 20/3.75+vw;
                }
                .form-main {
                    position: absolute;
                    bottom: 20/3.75+vw;
                    width: calc(100% - 16vw);
                    height: 150/3.75+vw;
                    .form-item {
                        display: flex;
                        margin-top: 10/3.75+vw;
                        font-size: 14/3.75+vw;
                        &.radio {
                            padding: 10/3.75+vw 20/3.75+vw;
                            display: flex;
                            justify-content: space-between;
                        }
                        &.validation {
                            justify-content: space-between;
                            .code-input {
                                width: 120/3.75+vw;
                            }
                        }
                    }
                }
            }
            .footer {
                margin-top: 50/3.75+vw;
                font-size: 18/3.75+vw;
            }
        }
    }
</style>
